<template>
  <div>
    <el-row>
      <el-col :span="3">
      <span class="demonstration" ></span>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
    <el-button type="success" style="padding-right:30px" icon="el-icon-apple">
      选择预约状态<i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    </span>
    <el-dropdown-menu slot="dropdown">
      <div v-for="item in options"
          :key="item.astate"       
          :value="item.astate" >
      <el-dropdown-item  @click.native="selAppointmentByAstate(item.astate)" icon="el-icon-money">
     {{item.astate}}
      </el-dropdown-item>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
    </el-col>
  </el-row>

  <el-table
    :data="tableData"
    height="500"
    style="width: 100%" >
    <div style="display: inline-block;" v-if="show">
    <el-table-column
      prop="did"
      label="医生"
      width="180">
    </el-table-column>
    </div>
    <el-table-column
      prop="dname"
      label="医生姓名"
      width="100">
    </el-table-column>
     <el-table-column
      prop="dhospital"
      label="医院名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="daddress"
      label="医院地址" 
      width="220">
    </el-table-column>
    <el-table-column
      prop="depname"
      label="所属团队"
      width="150">
    </el-table-column>
       <el-table-column
      prop="dtel"
      label="联系方式"
      width="120">
    </el-table-column>
    <el-table-column
      prop="atime"
      label="预约时间" 
      width="120">
    </el-table-column>
    <el-table-column
      prop="astate"
      label="预约状态"
      width="100">
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
      <el-button @click="cancelAppointment(scope.row)">取消预约</el-button>
      </template>
    </el-table-column>
  </el-table>

<!-- 提醒模态框开始 -->
    <el-dialog title="该服务已完成或已取消，请取消未完成的预约!" :visible.sync="dialogFormVisible">
        <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
    </el-dialog>
    <!-- 提醒模态框结束 -->

        <!-- 分页 -->
      <el-pagination  
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="pageTotal">
      </el-pagination>

  </div>
</template>

<script>
export default {
  mounted(){  
    this.updateTable();
    this.selAppointmentAstate();
  },
  methods: {
    handleCurrentChange(val){
      let pid=JSON.parse(sessionStorage.getItem("pat")).pid;
        this.$axios.post("patient-serv/patientinfo/selAppointmentServiceRecord/"+pid+"/"+this.currentPage1+"/"+this.pageSize)
        .then((response)=>{
          let r=response.data;
          this.tableData=r.data.list;
          this.pageTotal = response.data.data.total
        })
    },
      updateTable(){
        let pid=JSON.parse(sessionStorage.getItem("pat")).pid;
        this.$axios.post("patient-serv/patientinfo/selAppointmentServiceRecord/"+pid+"/"+this.currentPage1+"/"+this.pageSize)
        .then((response)=>{
          let r=response.data;
          this.tableData=r.data.list;
          this.pageTotal = response.data.data.total
        })},
      selAppointmentAstate(){
        this.$axios.post("patient-serv/patientinfo/selAppointmentAstate").then((response) => {
        console.log(response);
        let r=response.data;
        this.options=r.data;
        })
        },
      selAppointmentByAstate(astate){
        let pid=JSON.parse(sessionStorage.getItem("pat")).pid;
      this.$axios.post("patient-serv/patientinfo/selAppointmentByAstate/"+pid+"/"+astate+"/"+this.currentPage1+"/"+this.pageSize).then((response) => {
      let r=response.data;
      this.tableData=r.data.list;
      this.pageTotal = response.data.data.total
      },)
        },
      cancelAppointment(e){
        let pid=JSON.parse(sessionStorage.getItem("pat")).pid;
        let atime=e.atime;
        let did=e.did;
        this.$axios.post("patient-serv/patientinfo/cancelAppointment/"+pid+"/"+did+"/"+atime).then((response) => {
          if(response.data.code==500){
            this.dialogFormVisible=true;
            return;
          }
          this.$message.success("取消预约成功");
          this.updateTable();
        });
        }
        },

  data() {
      return {
        dialogFormVisible: false,
        options:[],
        show:false,
        tableData: [],
        currentPage1:1,
        pageTotal:100,
        pageSize:5,
      }
    }
  }
</script>

<style>
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .picture {
    width:100px;
    height: 90px; 
    border: 0px;
  }
</style>